Error Boundary

❓질문

Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요?

💡 조사하기전 내가 알고 있던 내용

에러 바운더리는 리액트 컴포넌트에서 전체 컴포넌트를 감싸는 형태로 작동하며, 내부에서 발생하는 에러가 표출될 때 대신 보여줄 수 있는 컴포넌트입니다. 이를 통해 사용자 경험을 높일 수 있습니다.

🏫 정리한 내용

Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트 입니다.

클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의할 수 있습니다. Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있습니다.

React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않으므로, 오류가 발생할 경우 페이지 전체가 하얗게 변하거나 사용자 입장에서 알 수 없는 화면이 표시되는 상황이 발생할 수 있습니다. 이는 사용자 경험을 크게 저해하고, 특히 대규모 애플리케이션에서 신뢰성에 큰 문제가 됩니다. Error Boundary는 이러한 문제를 해결하여 에러가 발생한 영역에서 대체 UI를 표시하고, 애플리케이션의 나머지 부분은 정상적으로 동작하도록 도와줍니다.